<template>
  <div class="personalCenter-container">
    <!-- 标题 start -->
    <el-card style="margin-bottom: 10px">
      <div
        style="display: flex;flex-direction: row;justify-content: space-between"
      >
        <div>
          <div class="verticalBar"></div>
          <span style="color: #1074fd">全球大数据</span>
        </div>
        <div>
          <span style="color: #999999;font-size: 12px">数据每日00:00更新</span>
        </div>
      </div>
    </el-card>
    <el-card style="position: relative">
      <div class="home"  v-loading="loading"  element-loading-text="正在导出">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="分类">
            <el-select
              v-model="formInline.type"
              style="display: inline-block;width: 130px"
            >
              <el-option
                v-for="item in typeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="国家">
            <el-select
              v-model="formInline.country"
              style="display: inline-block;width: 130px"
            >
              <el-option
                v-for="item in cityList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="语种">
            <el-select
              v-model="formInline.language"
              style="display: inline-block;width: 130px"
            >
              <el-option
                v-for="item in languageList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="号码数">
            <el-input v-model="formInline.num"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getType" v-show="phoneTotalNum - phoneUsedNum !== 0">获取</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          style="width: 100%;display: none"
          id="PTable">
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号码">
          </el-table-column>
        </el-table>
      </div>
      <div style="color: red;margin: 30px 0">本月已使用量为： {{phoneUsedNum}},剩余使用量为： {{phoneTotalNum - phoneUsedNum}}</div>
    </el-card>
<!--    模拟器云手机-->
    <el-dialog :visible.sync="dialogFormVisible" width="30%" :show-close="false">
      <div>
        <el-radio v-model="userType" label="0">云手机</el-radio>
        <el-radio v-model="userType" label="1">模拟器</el-radio>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from "@/network/api/userPhone";
  export default {
    data () {
      return {
        dialogFormVisible: false,
        loading: false,
        formInline: {
          organId: '',
          language: '',
          country: '',
          type: '',
          num: ''
        },
        toGetUserNum: {
          organId: ''
        },
        languageList: [],
        cityList: [],
        typeList: [],
        tableData: [],
        phoneTotalNum: '',
        phoneUsedNum: '',
        userType: '0',
        formLabelWidth: 100
      }
    },
    created () {
      this.formInline.organId = this.toGetUserNum.organId = JSON.parse(localStorage.getItem("updateUserInfo")).organId
      API.getNum(this.toGetUserNum).then(res => {
        console.log(res, 'res')
        this.phoneTotalNum = res.data.phoneTotalNum
        this.phoneUsedNum = res.data.phoneUsedNum
      })
      API.getCountry().then(res => {
        console.log(res, 'res')
        this.cityList = res.data
      })
      API.getLanguage().then(res => {
        console.log(res, 'res')
        this.languageList = res.data
      })
      API.getType().then(res => {
        console.log(res, 'res')
        this.typeList = res.data
      })
    },
    methods: {
      reset () {
        this.formInline.language = ''
        this.formInline.country = ''
        this.formInline.type = ''
        this.formInline.num = ''
      },
      getType() {
        if (this.formInline.language === '' || this.formInline.country === '' || this.formInline.type === '' || this.formInline.num === '') {
          this.$message.error('请填写必要参数！')
        } else {
          if (this.formInline.num > this.phoneTotalNum - this.phoneUsedNum) {
            this.$message.error('剩余量不足！！！')
          } else {
            this.dialogFormVisible = true
          }
        }
      },
      onSubmit () {
        this.dialogFormVisible = false
        this.formInline.num = Number(this.formInline.num)
        if (this.userType === '1') {
          API.getPhoneVcf(this.formInline).then(res => {
            this.loading = true
            console.log(res, 'res')
            if (res.data.code === 1) {
              this.$message.error(res.data.data)
            } else {
              // this.tableData = res.data
              setTimeout(() => {
                // this.$ExportExcel('PTable', 'UserPhone')
                // var vcf = Papa.unparse(res.data)
                // 定义文件内容，类型必须为Blob 否则createObjectURL会报错
                const content = new Blob([res.data])
                // 生成url对象
                const urlObject = window.URL || window.webkitURL || window
                const url = urlObject.createObjectURL(content)
                // 生成<a></a>DOM元素
                const el = document.createElement('a')
                // 链接赋值
                el.href = url
                el.download = 'UserPhone.vcf'
                // 必须点击否则不会下载
                el.click()
                // 移除链接释放资源
                urlObject.revokeObjectURL(url)
                this.loading = false
              }, 3000)
              setTimeout(() => {
                window.location.reload()
              }, 6000)
            }
          })
        } else {
          API.getPhoneTxt(this.formInline).then(res => {
            this.loading = true
            console.log(res, 'res')
            if (res.data.code === 1) {
              this.$message.error(res.data.data)
            } else {
              setTimeout(() => {
                // this.$ExportExcel('PTable', 'UserPhone')
                // var vcf = Papa.unparse(res.data)
                // 定义文件内容，类型必须为Blob 否则createObjectURL会报错
                var newTest = ''
                for (var i = 0; i < res.data.data.length; i++) {
                  newTest += res.data.data[i].name + ',' + res.data.data[i].phone + '\n'
                }
                console.log(newTest)
                const content = new Blob([newTest])
                // 生成url对象
                const urlObject = window.URL || window.webkitURL || window
                const url = urlObject.createObjectURL(content)
                // 生成<a></a>DOM元素
                const el = document.createElement('a')
                // 链接赋值
                el.href = url
                el.download = 'UserPhone.txt'
                // 必须点击否则不会下载
                el.click()
                // 移除链接释放资源
                urlObject.revokeObjectURL(url)
                this.loading = false
              }, 3000)
              setTimeout(() => {
                window.location.reload()
              }, 6000)
            }
          })
        }
      }
    }
  }
</script>
<style>
  /deep/ .el-dialog__header {
    background-color: #ffffff;
  }
</style>


